
import React, { useState } from 'react';
import { ChevronDownIcon } from './icons';

interface FaqItemProps {
    question: string;
    answer: string;
}

const FaqItem: React.FC<FaqItemProps> = ({ question, answer }) => {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <div className="border-b border-gray-200 dark:border-gray-700">
            <button
                onClick={() => setIsOpen(!isOpen)}
                className="w-full flex justify-between items-center py-5 text-left text-lg font-semibold"
            >
                <span className="text-gray-800 dark:text-gray-100">{question}</span>
                <ChevronDownIcon isOpen={isOpen} />
            </button>
            <div
                className={`grid transition-all duration-500 ease-in-out ${
                    isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
                }`}
            >
                <div className="overflow-hidden">
                    <p className="pb-5 text-gray-600 dark:text-gray-300">
                        {answer}
                    </p>
                </div>
            </div>
        </div>
    );
};

export default FaqItem;
